<template>
  <s-layout :title="`合同详情`" navbar="normal" leftIconColor="#333" :autoBack="false" :bgColor="state.bgColor"
    :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
    <view class="app" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <!-- 项目栏 -->
      <scroll-view scroll-y class="comprehensive" >
        <view class="main" v-if="lists">
        <view class="main_header flex_box">
          <image v-if="lists.mimetype = 'application/pdf'" :src="`${baseUrl}/uploads/uniapp_image/staff/pdf.png`">
          </image>
          <image v-else-if="lists.mimetype = 'application/msword'"
            :src="`${baseUrl}/uploads/uniapp_image/staff/word.png`">
          </image>
          <image v-else-if="lists.mimetype = 'application/vnd.ms-excel'"
            :src="`${baseUrl}/uploads/uniapp_image/staff/excel.png`"></image>
            <image v-else
            :src="`${baseUrl}/uploads/uniapp_image/staff/ Contract_IconIMG.png`"></image>
          <view class="right_text">
            <view class="filename">{{ lists.filename }}</view>
            <view class="dates" v-if="lists.expire_date !== null">到期时间：{{ lists.expire_date }}</view>
          </view>
        </view>
        <!---合同信息-->
        <view class="flex_box information">
          <view class="subtitle">合同信息</view>
          <view class="infor_item">
            <view class="label">合同公司</view>
            <view class="content">{{lists.category?.title }}</view>
          </view>
          <!-- <view class="infor_item">
            <view class="label">合同金额</view>
            <view class="content">{{lists.filename }}</view>
          </view> -->
          <view class="infor_item">
            <view class="label">有效期至</view>
            <view class="content blue">{{ lists.expire_date}}</view>
          </view>
          <view class="infor_item">
            <view class="label">文件类型</view>
            <view class="content">
              {{ lists.imagetype }}

            </view>
          </view>
          <view class="infor_item">
            <view class="label">文件大小</view>
            <view class="content">{{formatFileSize(lists.filesize)}}</view>
          </view>
        </view>
        <!-- 合同简介 -->
        <view class="introduction flex_box">
          <view class="subtitle">合同简介</view>
          <view clss="content"><up-parse :content="lists.content"></up-parse></view>
        </view>
          <!-- 提示消息 -->
        <view class="hint">
          <image :src="`${baseUrl}/uploads/uniapp_image/staff/Contract_icon_secure.png`" mode="scaleToFill" />
          <view class="hint_text">您的信息已经过安全中心加密</view>
        </view>
      </view>
      </scroll-view>
      <view class="footer">
        <button class="button" @click="examine">
          <uni-icons type="download" size="20"
            color="#fff"></uni-icons>&nbsp;&nbsp;查看合同</button>
        <!-- <button class="button" @click="download">下载文件</button> -->
      </view>

    </view>
  </s-layout>
</template>

<script setup>
import {reactive,ref} from 'vue';
import {
  onLoad,
} from '@dcloudio/uni-app';

import sheep from '@/sheep';
import { baseUrl } from '@/sheep/config';
import {
  formatFileSize
	} from '@/utils/fn.js';
const state = ref({
  bgColor: '#fff',
  ids: ''
})
const { safeAreaInsets } = uni.getSystemInfoSync()
onLoad((val) => {
  state.value.ids = val.id
  getAbout()
})
const lists = ref()
const  mimetype = ref()
function getAbout() {
  let p = {
    ids: state.value.ids
  };
  sheep.$api.contract.getAttachmentView(p).then((res) => {
  
   
    lists.value = res.data
    mimetype.value =   res.data.mimetype

  })
}


//点击查看合同
function examine() {
  // //加载框动画
	uni.showLoading({ title: '读取中' });
  uni.downloadFile({
    url: baseUrl + lists.value.url, 
    success: (data) => {
      if (data.statusCode === 200) {
        uni.getFileSystemManager().saveFile({
          tempFilePath: data.tempFilePath, //临时路径
          filePath: uni.env.USER_DATA_PATH + "/" + lists.value.filename, 
          success: function (res) {
            setTimeout(() => {
              var filePath = res.savedFilePath;
              if (mimetype.value.includes('image')) {
                uni.hideLoading();
                   //如果是图片走这里
                    uni.previewImage({
                      current: 0,
                      urls: [baseUrl+lists.value.url],
                    })

              } else {
                uni.hideLoading();
                uni.openDocument({   
                  filePath: filePath,
                  showMenu: true, // 显示右上角菜单（在小程序中可实现转发等操作）
                  success: function (ress) {
                    // sheep.$helper.toast(ress.errMsg)
                  },
                  fail(err) {
                    
                    sheep.$helper.toast(err.errMsg)
                  }
                });
              }
        
            }, 1000)
          }
        });
   
      }else{
        sheep.$helper.toast('服务器资源已删除')
      }
    },
    fail: (err) => {
      uni.hideLoading()
      sheep.$helper.toast('暂时没有合同信息')
    },
  });
}
</script>

<style lang="scss" scoped>
.app {
  width: 100%;
  height: auto;
}

.header {
  width: 96%;

  image {
    width: 80%;
    margin-left: 10%;
  }
}

.main {
  width: calc(100% - 44rpx);
  background-color: transparent;
  margin: 20rpx auto;
  overflow: hidden;

}

.flex_box {
  background: $uni-bg-color;
  margin: 0 auto 20rpx auto;
  border-radius: 16rpx;

  .subtitle {
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 30rpx;
    height: 90rpx;
    line-height: 90rpx;
  }
}

.main_header {
  padding: 35rpx 30rpx;
  display: flex;
  align-items: center;

  image {
    width: 60rpx;
    height: 72rpx;
  }

  .right_text {
    width: 90%;
    margin-left: 30rpx;
    margin-top: 20rpx;
    text-overflow: ellipsis;

    .filename {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: 500;
      font-size: $uni-font-size-base;
      margin-bottom: 10rpx;
    }

    .dates {
      font-family: PingFangSC;
      color: #666666;
      font-weight: 400;
      font-size: $uni-font-size-sm;
    }
  }
}

//合同信息
.information {
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;

  .infor_item {
    height: 70rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .label {
      font-family: PingFangSC;
      color: #999999;
      font-weight: 500;
      font-size: $uni-font-size-base;
    }

    .content {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: 500;
      font-size: $uni-font-size-base;
      width: 80%;
      text-align: right;
    }

    .blue {
      color: $uni-color-primary;
    }
  }
}

// 合同简介
.introduction {
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;

  .content {
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: 400;
    font-size: $uni-font-size-sm;
    line-height: 44rpx;

  }
}

//合同照片
.picture {
  padding: 20rpx 30rpx 30rpx 30rpx;
  display: flex;
  flex-direction: column;
  .pic_item {
    display: flex;
    justify-content: space-between;
    .images{
      width: 326rpx;
      height: 200rpx;
      border-radius: 12rpx;
      background-color: #F7F5F4;
      border: 2rpx solid #F2F2F2;
      display: flex;
      justify-content: center;
      image{
        width: 88%;
        height: 100%;
      }
    }
  }
}
// 提示消息
.hint{
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  image{
    width: 24rpx;
    height: 26rpx;
    margin-right: 10rpx;
  }
  .hint_text{
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: 400;
    font-size: $uni-font-size-sm;
  }
}
.footer {
  width: 100%;
  border-top: 1rpx solid #ccc;
  height: 150rpx;
  position: fixed;
  bottom: 0;
  right: 0;
  background: $uni-bg-color;

  .button {
    width: 670rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    margin-top: 30rpx;
    color: $uni-bg-color;
    font-size: $uni-font-size-big;
  }
}
// 滚动
.comprehensive{
        background-color: rgba(0, 0, 0, 0);
        height: 80vh;
}
</style>